<template>
  <div class="search">
    <div class="search-box">
      <img :src="imgSuggest" alt="">
      <input type="text" placeholder="搜索歌曲、歌手、专辑" v-model="keywords" v-throttle='search'>
    </div>
    <div class="search-suggest" v-show="keywords !== ''">
      <ScrollView>
        <ul>
          <li v-for="value in songs" :key='value.id' @click.stop="selectMusic(value.id)">
            <img :src="imgSuggest" alt="">
            <p>{{value.name}} - {{value.artists[0].name}}</p>
          </li>
        </ul>
      </ScrollView>
    </div>
    <div class="search-hot">
      <h3>热门搜索</h3>
      <ul>
        <li v-for="value in hots" :key='value.first' @click.stop="selectedHot(value.first)">{{value.first}}</li>
      </ul>
    </div>
    <ul class="search-history">
      <li v-for="value in searchHistory" :key="value" @click.stop="selectedHot(value)">
        <div class="history-left">
          <img src="" alt="">
          <p>{{value}}</p>
        </div>
        <div class="history-right">
          <img @click.stop="delHistory(value)" src="" alt="">
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import ScrollView from '../components/ScrollView.vue'
import { getSearchList, getSearchHot } from '../api/index'
import { mapActions } from 'vuex'
import { getLocalStorage, setLocalStorage } from '../tools/tools'
import MetaInfo from '../../vue-meta-info'
export default {
  name: 'Search',
  metaInfo: MetaInfo.search,
  components: {
    ScrollView
  },
  data () {
    return {
      imgSuggest: '',
      keywords: '',
      songs: [],
      hots: [],
      searchHistory: []
    }
  },
  methods: {
    ...mapActions([
      'setFullScreen',
      'setSongDetail'
    ]),
    selectMusic (id) {
      this.setFullScreen(true)
      this.setSongDetail([id])
      if (this.searchHistory.includes(this.keywords)) {
        return
      }
      this.searchHistory.push(this.keywords)
      setLocalStorage('searchHistory', this.searchHistory)
      this.keywords = ''
    },
    search () {
      getSearchList({ keywords: this.keywords })
        .then((data) => {
          console.log(data)
          this.songs = data.result.songs
        })
        .catch((err) => {
          console.log(err)
        })
    },
    selectedHot (name) {
      this.keywords = name
      this.search()
    },
    delHistory (name) {
      this.searchHistory = this.searchHistory.filter(function (item) {
        return item !== name
      })
      setLocalStorage('searchHistory', this.searchHistory)
    }
  },
  directives: {
    // 自定义指令
    throttle: {
      inserted: function (el, obj) {
        let timerId = null
        let flag = true
        el.addEventListener('input', function () {
          if (!flag) return
          flag = false
          timerId && clearTimeout(timerId)
          timerId = setTimeout(function () {
            flag = true
            obj.value()
          }, 1000)
        })
      }
    }
  },
  created () {
    getSearchHot()
      .then((data) => {
        console.log(data.result.hots)
        this.hots = data.result.hots
      })
      .catch((err) => {
        console.log(err)
      })
    if (getLocalStorage('searchHistory') === undefined || getLocalStorage('searchHistory') === null) {
      return
    }
    this.searchHistory = getLocalStorage('searchHistory')
  }
}
</script>

<style scoped lang='scss'>
@import "../assets/css/mixin";
@import "../assets/css/variable";
  .search{
    position: fixed;
    left: 0;
    right: 0;
    top: 184px;
    bottom: 0;
    @include bg_sub_color();
    .search-box{
      display: flex;
      margin: 40px 20px;
      align-items: center;
      background-color: #ebecec;
      border-radius: 30px;
      border-bottom: 1px solid #ccc;
      img{
        width: 40px;
        height: 40px;
        margin-left: 20px;
      }
      input{
        border: none;
        outline: none;
        background-color: transparent;
        @include font_size($font_medium);
        height: 60px;
        margin-left: 20px;
      }
    }
    .search-suggest{
      position: fixed;
      left: 0;
      right: 0;
      top: 300px;
      bottom: 0;
      overflow: hidden;
      @include bg_sub_color();
      li{
        display: flex;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        img{
          width: 40px;
          height: 40px;
        }
        p{
          margin-left: 20px;
          @include font_color();
          @include font_size($font_medium);
        }
      }
    }
    .search-hot{
      h3{
        @include font_color();
        @include font_size($font_medium);
        padding: 10px 20px;
      }
      ul{
        display: flex;
        flex-wrap: wrap;
        li{
          height: 60px;
          line-height: 60px;
          border: solid 1px #ccc;
          border-radius: 30px;
          padding: 0 20px;
          @include font_color();
          @include font_size($font_medium_s);
          margin: 10px 20px;
        }
      }
    }
    .search-history{
      margin-top: 20px;
      li{
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        .history-left{
          display: flex;
          align-items: center;
          img{
            width: 40px;
            height: 40px;
          }
          p{
            @include font_color();
            @include font_size($font_medium_s);
            margin-left: 20px;
          }
        }
        .history-right{
          img{
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }
</style>
